<template>
  <div class="home">
    <van-nav-bar
      title="学生成绩管理系统"
      left-text="添加"
      right-text="筛选"
      @click-left="$router.push('/about')"
      @click-right="show = true"
    />
    <my-card
      v-for="(item, index) in list"
      :key="index"
      :itemObj="item"
      @click="$router.push(`/about?i=${index}`)"
    ></my-card>
    <van-popup v-model:show="show" round position="bottom">
      <div class="pop-ct">
        <van-button :plain="checkIndex[0]!=='优秀'" type="primary" @click="filt(0,'优秀')">优秀</van-button>
        <van-button :plain="checkIndex[1]!=='良好'" type="success" @click="filt(1,'良好')">良好</van-button>
        <van-button :plain="checkIndex[2]!=='末班'" type="danger" @click="filt(2,'末班')">末班</van-button>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { useStore } from "vuex";
import { computed, ref } from "vue";
import myCard from "../components/myCard";
export default {
  name: "HomeView",
  components: { myCard },
  setup(props) {
    const show = ref(false);
    const { state } = useStore();
    const list = ref(state.list);
    // console.log(list);
    // const checkIndex = ref([false,false,false]); // 选中的索引
    const checkIndex = ref([null,null,null]); 
    const filt = (i,val) => { // 筛选函数  
      checkIndex.value[i] = checkIndex.value[i]==val?null:val;
      // console.log(checkIndex.value);
      // some 只要有一项存在都会返回 true;
     let bool = checkIndex.value.some(item => item);
     if (bool){
       list.value = state.list.filter(item => checkIndex.value.includes(item.txt));
     } else {
       list.value = state.list;
     }
     


      // console.log(checkIndex.value);
      // list.value = state.list.filter(item => checkIndex.value[item.statu]);
      //  checkIndex.value = checkIndex.value == i?null:i;
      //  if(checkIndex.value == null){
      //     list.value = state.list;
      //  } else {
      //     list.value = state.list.filter(item => item.statu == i);
      //  }
      //  console.log(checkIndex.value);
      //  show.value = false;
    }
    return {
      list,
      show,
      filt,
      checkIndex
    };
  },
};
</script>
<style lang="scss" scoped>
.home {
  height: 100%;
  background: #e9e9e9;
  .pop-ct{
    height: 260px;
    background: #fff;
    padding: 30px 15px;
    box-sizing: border-box;
    .van-button{
      margin-right: 10px;
    }
  }
}
</style>
